<template>
  <div class="login-page">
    <login-header></login-header>

    <div class="login-frame">
      <p class="login-title">用户注册</p>
      <div class="user-name">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-smartphone"></use>
        </svg>
        <input type="text" class="self-input" v-model="sMobile" placeholder="请输入手机号" @blur="checkMobile"/>
        <p class="login-tips">{{showErrMobile}}</p>
      </div>
      <div class="pass-word">
        <svg class="icon" aria-hidden="true">

          <use xlink:href="#icon-zap"></use>
        </svg>
        <!--<button class="save-btn-two send-num" @click="handleSendClick" :class="{hasSend:sendClass}" ref="sendNum">-->
        <!--获取验证码-->
        <!--</button>-->
        <button class="save-btn-two send-num" @click="handleSendClick" v-show="!sendClass">获取验证码</button>
        <button class="save-btn-two send-num hasSend" v-show="sendClass">{{secNum}}s</button>
        <input type="text" class="self-input" v-model="checkCode" placeholder="请输入验证码" @blur="checkNumber"/>
        <p class="login-tips">{{showErrNub}}</p>
      </div>
      <div class="pass-word">
        <svg class="icon" aria-hidden="true">

          <use xlink:href="#icon-lock"></use>
        </svg>
        <input type="password" class="self-input" v-model="password" placeholder="请输入密码" @blur="checkPass"/>
        <p class="login-tips">{{showErrPass}}</p>

        <p class="input-tips">密码规则：6-16位，必须包含数字、字母或下划线中任意两种</p>

      </div>
      <button class="save-btn-two" @click="submitRegist">注册</button>
      <!--<p class="no-number">已有账号，<em>立即登录</em></p>-->
    </div>
  </div>
</template>

<script>
  import LoginHeader from '@/components/LoginHeader'
  import util from '../../lib/util'
  import {
    SUCCESS_CODE,
    NOT_EXIST_CODE,
    HAD_EXIPRED_CODE,
    USER_PHONE_CODE,
    USER_INFO_NULL_CODE
  } from '../../lib/returnCode'
  import {mapState, mapActions} from 'vuex';

  export default {
    name: 'LoginForm',
    components: {
      LoginHeader
    },
    data() {
      return {
        sendClass: false,
        sMobile: '',
        showErrMobile: '',
        checkCode: '',
        password: '',
        showErrNub: '',
        showErrPass: '',
        secNum: 120
      }
    },
    created() {
    },
    computed: {
      ...mapState([
        'isLogin'
      ]),
    },
    methods: {
      handleSendClick() {

        if (!this.checkMobile()) {
          return
        }
        if (this.sendClass) {
          return
        }
        //检查此手机号是否已经注册用户
        util.ajax.get(`user/checkMobile/${this.sMobile}`).then((res) => {
          if (res.code == SUCCESS_CODE) {
            if (!res.data) {
              this.sendClass = true;
              var that = this
              var timer = setInterval(function () {
                that.secNum--;
                if (that.secNum == 0) {
                  that.sendClass = false;
                  that.secNum = 120;
                  clearInterval(timer);
                }
              }, 1000)
              util.ajax.post('/vc', {
                'account': this.sMobile
              });
            } else {
              this.showErrMobile = '此用户已存在';
              return;
            }
          }
        });
      },
      checkMobile: function () {

        let isPass = true;
        if (this.sMobile) {
          if (!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.sMobile))) {
            isPass = false;
            this.showErrMobile = '请输入正确的手机格式'
          } else {
            this.showErrMobile = ''
          }

        } else {
          isPass = false;
          this.showErrMobile = '请输入手机号码'
        }
        return isPass;

      },
      checkNumber: function () {




        if (this.checkCode) {
          let reg = /^\d{6}$/;
          if (reg.test(this.checkCode)) {

            this.showErrNub = ''

          } else {

            this.showErrNub = '验证码格式有误'
          }
        } else {
          this.showErrNub = '请输入验证码'
        }


      },
      checkPass: function () {

        /*var pPattern = /^.*(?=.{6,16})(?=.*\d)(?=.*[A-Za-z_-])(?=.*[!@#$%^&*? ]).*$/;*/
        let pPattern = /^(?!\d+$)(?![A-Za-z_]+$)[a-zA-Z0-9_]{6,16}$/;

        if (pPattern.test(this.password)) {

          this.showErrPass = ''

        } else {

          this.showErrPass = '请输入正确格式的密码'

        }


      },
      // 提交组成
      submitRegist: function () {


        // 判断手机号码

        if (!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.sMobile))) {

          this.showErrMobile = '请输入正确的手机格式';
          return
        } else {
          this.showErrMobile = ''
        }

        // 判断验证码
        let reg = /^\d{6}$/;
        if (reg.test(this.checkCode)) {

          this.showErrNub = ''

        } else {
          this.showErrNub = '验证码格式有误';
          return
        }

        // 判断密码格式
        let pPattern = /^(?!\d+$)(?![A-Za-z_]+$)[a-zA-Z0-9_]{6,16}$/;

        if (pPattern.test(this.password)) {

          this.showErrPass = ''

        } else {
          this.showErrPass = '请输入正确格式的密码';
          return
        }


        util.ajax.post('user/regist', {
          "code": this.checkCode,
          "password": this.password,
          "phone": this.sMobile
        }).then((res) => {

          if (res.code == SUCCESS_CODE) {

            /*localStorage.setItem('regPhone', this.sMobile);
             localStorage.setItem('regPassword', this.password);*/
            //this.$router.push({name: 'LoginRegister'});
            this.sMobile = '';
            this.password = '';
            this.checkCode = '';



            this.$router.push({path: 'LoginRegister'});

            this.$store.commit('LOGING_CODE', USER_INFO_NULL_CODE);

          } else {

            this.$message.error(res.msg);

          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .login-page {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: $borderbottomColor;
    .login-frame {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -184px;
      margin-top: -166px;
      height: 312px;
      padding: 30px 50px 40px;
      border: 1px solid $listborderColor;
      background: $colorWhite;
      border-radius: 8px;
      text-align: center;
      .login-title {
        padding-bottom: 30px;
        font-size: $fs16;
        line-height: 20px;
        color: $vfConcentColor;
      }
      .user-name, .pass-word {
        position: relative;
        .send-num {
          position: absolute;
          top: 0px;
          right: 0px;
          display: block;
          width: 100px;
          height: 42px;
          font-size: $fs14;
          border-left: 0px;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }
        .hasSend {
          color: $vfConcentColor;
          background: #d7dae0;
        }
        .icon {
          position: absolute;
          top: 10px;
          left: 18px;
          width: 20px;
          height: 20px;
          color: $vfConcentColor;
        }
        .self-input {
          padding: 0px 20px 0px 48px !important;
          width: 202px;
          height: 40px;
          line-height: 40px;
          font-size: $fs14;
          color: $listTitleColor;
          border: 1px solid $listTitleColor;
          background: $listBgColor;
          border-radius: 20px;
        }
        .login-tips, .input-tips {
          padding-left: 48px;
          width: 220px;
          text-align: left;
          font-size: $fs12;
          line-height: 20px;
          min-height: 20px;
          max-height: 40px;
          color: $borderColor;
        }

        .input-tips {
          color: $vfConcentColor;
          padding-left: 0px;
          width: 270px;
        }
      }
      .login-forget {
        margin-bottom: 20px;
        span {
          float: left;
          font-size: $fs14;
          line-height: 24px;
          color: $mainborderColor;
          cursor: pointer;
          &:nth-child(2) {
            float: right;
          }
        }
      }
      .save-btn-two {
        margin-bottom: 30px;
        width: 270px;
      }
      .no-number {
        color: $vfConcentColor;
        em {
          font-size: $fs16;
          line-height: 20px;
          color: $mainborderColor;
          cursor: pointer;
        }
      }
    }
  }

</style>
